<template>
  <div>
    <div class="sub-menu-title">{{curMainMenuItemLabel}}</div>
    <el-menu ref='menu' class="el-menu-vertical-demo" @select="handleSelect" theme="dark" :default-active='subMenuIndex'>
      <template v-for='submenuItem in subMenu'>
        <el-menu-item
          :index="submenuItem.butRule"
          @click='goToPage(submenuItem)'
        ><i class=""></i>{{submenuItem.resName}}</el-menu-item>
      </template>

    </el-menu>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        curMainMenuItemLabel: '',
        subMenuIndex: ''
      }
    },
    watch: {
      $route () {
        this.$nextTick(() => {
          this.findRouterParent()
          // 强制设置menu组件的高亮显示
          setTimeout(() => {
            this.$refs.menu.activedIndex = this.subMenuIndex
          }, 0)
        })
      }
    },
    methods: {
      handleSelect (key, keyPath) {
      },
      goToPage (item) {
        if (item.butRule === this.$route.path) {
          window.location.href = item.butRule
        } else {
          this.$router.push(({ path: item.butRule }))
        }
      },
      findRouterParent () {
        this.subMenuIndex = this.$store.state.route.path
      }
    },
    computed: {
      subMenu () {
        let curRouterParent = this.$store.state.route.meta.parent
        let menuData = this.$store.state.menu.menuData
        let curModule = menuData.find((item, index) => {
          return item.butRule === '/' + curRouterParent
        })
        if (!curModule) {
          return []
        }
        this.curMainMenuItemLabel = curModule.resName
        return curModule.children
      }
    }
  }
</script>

<style lang='less'>
  .sub-menu-title{
    padding-top: 30px;
    padding-bottom: 52px;
    text-indent: 20px;
    /*height: 80px;*/
    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }
</style>
